<template>
  <div v-loading="loading" element-loading-text="加载中..." class="warehouse_list">
    <div class="main">
      <div class="statistics">
        <div class="item">
          <div class="title">本月入库</div>
          <div class="num">{{ Number(InWidthOutStoreQty?.inStoreQty || 0).toLocaleString() }}</div>
        </div>
        <div class="line"></div>
        <div class="item">
          <div class="title">本月出库</div>
          <div class="num">{{ Number(InWidthOutStoreQty?.outStoreQty || 0).toLocaleString() }}</div>
        </div>
      </div>
      <div class="divider_line"></div>
      <div class="table_container">
        <div class="operate">
          <div class="btn_group">
            <HPlainButton v-permission="'storage_add'" @click="showAdd"> 添加仓库 </HPlainButton>
            <el-dropdown trigger="click">
              <HButton :disabled="ids.length == 0">
                批量操作
                <el-icon class="el-icon--right">
                  <arrow-down />
                </el-icon>
              </HButton>
              <template #dropdown>
                <el-dropdown-menu>
                  <div v-permission="'storage_enabled'">
                    <el-dropdown-item @click="changeAll(1, '要启用仓库')">
                    <el-icon>
                      <CircleCheck />
                    </el-icon>
                    批量启用
                  </el-dropdown-item>
                  </div>

                  <div v-permission="'storage_disabled'">
                    <el-dropdown-item @click="changeAll(2, '要禁用仓库')">
                    <el-icon>
                      <Warning />
                    </el-icon>
                    批量禁用
                  </el-dropdown-item>
                  </div>
                  
                  <div v-permission="'storage_canSet'">
                    <el-dropdown-item @click="changeAll(4, `修改为'允许负库存'`)">
                    <el-icon>
                      <FolderChecked />
                    </el-icon>
                    允许负库存
                  </el-dropdown-item>
                  </div>
                  
                  <div v-permission="'storage_notSet'">
                    <el-dropdown-item @click="changeAll(5, `修改为'不允许负库存'`)">
                    <el-icon>
                      <FolderRemove />
                    </el-icon>
                    不允许负库存
                  </el-dropdown-item>
                  </div>

                  <div v-permission="'storage_delete'">
                    <el-dropdown-item @click="changeAll(3, '要删除仓库')">
                    <el-icon>
                      <Delete />
                    </el-icon>
                    批量删除
                  </el-dropdown-item>
                  </div>
                  
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
          <div class="search">
            <el-select
              v-model="storeListSearch.outStoreExample"
              clearable
              placeholder="仓库类型"
              @change="getListStoreRows"
              @clear="onStorageTypeClear"
            >
              <el-option label="内部仓库" :value="0" />
              <!-- <el-option label="部门-外部仓库" :value="1" />
              <el-option label="工程师-外部仓库" :value="2" /> -->
            </el-select>
            <el-input
              v-model.trim="storeListSearch.storeSearch"
              clearable
              placeholder="仓库名称/仓库序列号"
              @keyup.enter="getListStoreRows"
              @clear="getListStoreRows"
            >
            </el-input>
            <el-input
              v-model.trim="storeListSearch.userSearch"
              clearable
              placeholder="仓管/手机号"
              @keyup.enter="getListStoreRows"
              @clear="getListStoreRows"
            >
            </el-input>
            <HButton type="primary" @click="getListStoreRows">
              <el-icon>
                <Search />
              </el-icon>
              搜索
            </HButton>
            <HButton @click="clearVlaue">
              <el-icon>
                <RefreshRight />
              </el-icon>
              重置
            </HButton>
          </div>
        </div>
        <!-- 列表 -->
        <div class="table">
          <el-table
            ref="tableRef"
            v-loading="loading"
            border
            stripe
            resizable
            :data="tableDataList"
            height="100%"
            @selection-change="handleChange"
            @row-dblclick="goDetailPage"
          >
            <template #empty>
              <el-empty description="暂无数据" :image-size="140" />
            </template>
            <el-table-column type="selection" width="40" fixed :align="'center'" />

            <!-- 序号 -->
            <el-table-column type="index" label="序号" width="60" fixed :align="'center'" />

            <!-- 创库序列号 -->
            <el-table-column show-overflow-tooltip prop="storeNo" label="仓库编号" width="120" />

            <!-- 仓库名称 -->
            <el-table-column show-overflow-tooltip prop="name" label="仓库名称" width="130">
              <template #default="item">
                <HLink @click="goDetailPage(item.row)">{{ item.row.name }}</HLink>
              </template>
            </el-table-column>

            <!-- 仓库类型 -->
            <el-table-column show-overflow-tooltip label="仓库类型" width="124">
              <template #default="item">
                <span>
                  {{
                    item.row.outStore
                      ? item.row.outStoreType == 1
                        ? '部门 - 外部仓库'
                        : '工程师 - 外部仓库'
                      : '内部仓库'
                  }}
                </span>
              </template>
            </el-table-column>

            <!-- 负库存 -->
            <el-table-column label="负库存" width="86">
              <template #default="scope">
                <div
                  :class="{ allow_negative_inventory: true, disable: !scope.row.canNegativeStock }"
                >
                  <div class="icon">
                    <i v-if="scope.row.canNegativeStock" class="iconfont icon-dagou"></i>
                    <i v-else class="iconfont icon-guanbi"></i>
                  </div>
                  <div class="txt">{{ scope.row.canNegativeStock ? '允许' : '不允许' }}</div>
                </div>
              </template>
            </el-table-column>

            <!-- 仓库 -->
            <el-table-column label="仓位" width="74">
              <template #default="scope">
                <div
                  :class="{
                    allow_negative_inventory: true,
                    disable: !scope.row.enableStorePosition,
                  }"
                >
                  <div class="icon">
                    <i v-if="scope.row.enableStorePosition" class="iconfont icon-dagou"></i>
                    <i v-else class="iconfont icon-guanbi"></i>
                  </div>
                  <div class="txt">{{ scope.row.enableStorePosition ? '开启' : '关闭' }}</div>
                </div>
              </template>
            </el-table-column>

            <!-- 管理员 -->
            <el-table-column show-overflow-tooltip prop="userName" label="管理员" width="100" />

            <!-- 电话 -->
            <el-table-column show-overflow-tooltip prop="userPhone" label="电话" width="104" />

            <!-- 仓库地址 -->
            <el-table-column show-overflow-tooltip label="仓库地址" min-width="240">
              <template #default="item">
                {{ item.row.province }}&nbsp;{{ item.row.city }}&nbsp;{{ item.row.area }}&nbsp;{{
                  item.row.town
                }}&nbsp;{{ item.row.address }}
              </template>
            </el-table-column>

            <!-- 创建时间 -->
            <el-table-column show-overflow-tooltip prop="createTime" label="创建时间" width="128" />

            <!-- 更新时间 -->
            <el-table-column show-overflow-tooltip prop="updateTime" label="更新时间" width="128" />

            <!-- 状态 -->
            <el-table-column prop="status" label="状态" width="70" :align="'center'" fixed="right">
              <template #default="scope">
                <div class="flex_justify_center">
                  <HStatus v-if="scope.row.status" type="info">禁用</HStatus>
                  <HStatus v-else>启用</HStatus>
                </div>
              </template>
            </el-table-column>

            <!-- 操作 -->
            <el-table-column fixed="right" label="操作" width="90">
              <template #default="scope">
                <h-space>
                  <HLink v-permission="'storage_update'" @click="getDetailStoreItem(scope.row.id)">编辑</HLink>
                  <h-link v-permission="'storage_delete'" type="error" @click="handleDelStorage(scope.row)">删除</h-link>
                </h-space>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="pagination">
          <Pagination
            ref="pagination"
            :list_total="total"
            @size-change="getListStoreRows"
            @current-change="getListStoreRows(false)"
          />
        </div>
      </div>
    </div>
    <!-- 添加仓库弹窗 -->
    <h-drawer
      v-model="addDialog"
      :title="storeForm.id ? '编辑仓库' : '添加仓库'"
      :width="800"
      unit="px"
      :loading="saveWarehouseLoading"
    >
      <el-form
        ref="ruleFormRef"
        :model="storeForm"
        label-position="top"
        :rules="rulesStore"
        class="modal_form_content"
        inline-message
      >
        <el-form-item prop="outStoreExample">
          <template #label>
            <span>
              仓库类型
              <el-tooltip content="创建后不可更改" placement="top">
                <el-icon>
                  <QuestionFilled />
                </el-icon>
              </el-tooltip>
            </span>
          </template>
          <el-select v-model="storeForm.outStoreExample" :disabled="storeForm.id != null" clearable>
            <el-option label="内部仓库" :value="0" />
            <el-option label="部门-外部仓库" :value="1" />
            <el-option label="工程师-外部仓库" :value="2" />
          </el-select>
        </el-form-item>
        <el-form-item
          v-if="storeForm.outStoreExample != 0"
          prop="relationId"
          :label="storeForm.outStoreExample == 1 ? '关联部门' : '关联工程师'"
        >
          <el-select
            v-model="storeForm.relationId"
            placeholder="请选择"
            clearable
            :disabled="storeForm.id != null"
            filterable
            remote
            reserve-keyword
            :remote-method="onRelationREmoetMethod"
            @change="onRelationChange"
          >
            <el-option
              v-for="item in outStoreRelation"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="仓库名称" prop="name">
          <el-input v-model.trim="storeForm.name" clearable placeholder="仓库名称" />
        </el-form-item>
        <el-form-item label="仓库地址" prop="province">
          <SingleAddress ref="addrsDom" :address="addrs" @value-change="addressValChange" />
        </el-form-item>
        <el-form-item label="详细地址" prop="address">
          <el-input
            v-model.trim="storeForm.address"
            clearable
            class="detail"
            placeholder="请输入详细地址"
            type="text"
            autocomplete="off"
            maxlength="200"
          />
        </el-form-item>
        <el-form-item label="仓管" prop="userName">
          <el-input v-model.trim="storeForm.userName" clearable placeholder="仓管名称" />
        </el-form-item>
        <el-form-item label="电话" prop="userPhone">
          <el-input
            v-model.trim="storeForm.userPhone"
            clearable
            maxlength="11"
            placeholder="电话号码"
            @input="storeForm.userPhone = storeForm.userPhone.replace(/[^\d]/g, '')"
          />
        </el-form-item>

        <div class="same_line" style="column-gap: 32px">
          <el-form-item
            v-if="storeForm.outStoreExample === 0"
            prop="enableStorePosition"
            class="same_line"
          >
            <template #label>
              <span>
                仓位
                <el-tooltip
                  :content="
                    storeForm.id
                      ? '创建后不可更改'
                      : '创建后不可更改,开启仓位后，设备出入库都要选择仓位'
                  "
                  placement="top"
                >
                  <el-icon>
                    <QuestionFilled />
                  </el-icon>
                </el-tooltip>
              </span>
            </template>
            <div class="switch_container" style="margin-right: 12px">
              <el-switch
                v-model="storeForm.enableStorePosition"
                :disabled="storeForm.id && storeForm.id != null"
                @change="enableStorePositionValue"
              />
              <span v-if="storeForm.enableStorePosition">启用</span>
              <span v-else>禁用</span>
            </div>
          </el-form-item>
          <el-form-item label="负库存" class="same_line">
            <div style="display: flex; gap: 5px; align-items: center">
              <el-switch v-model="storeForm.canNegativeStock" />
              <span v-if="storeForm.canNegativeStock">允许</span>
              <span v-else>不允许</span>
            </div>
          </el-form-item>
          <el-form-item label="仓库状态" class="same_line">
            <div style="display: flex; gap: 5px; align-items: center">
              <el-switch v-model="storeForm.status" />
              <span v-if="storeForm.status">启用</span>
              <span v-else>禁用</span>
            </div>
          </el-form-item>
        </div>
        <template v-if="storeForm.enableStorePosition">
          <template v-for="(i, index) in storeForm.storePositionVos" :key="index">
            <el-form-item
              :label="index == 0 ? '仓位名称' : ''"
              :prop="`storePositionVos[${index}][name]`"
              :rules="[{ required: true, message: '请输入仓位名称', trigger: ['blur', 'change'] }]"
            >
              <div class="shipping_space">
                <el-input
                  v-model.trim="i.name"
                  clearable
                  class="detail"
                  placeholder="请输入仓位名称"
                  autocomplete="off"
                  :style="{ width: storeForm.id ? '360px' : '435px' }"
                />
                <div v-show="storeForm.id" class="switch_container">
                  <el-switch v-model="i.status" />
                  <span v-if="!i.status">禁用</span>
                  <span v-else>启用</span>
                </div>
                <el-space :size="0" :spacer="spacer">
                  <h-link
                    v-if="storeForm.storePositionVos.length > 1"
                    type="error"
                    @click="deleteItem(i, index)"
                    >删除</h-link
                  >
                  <h-link v-if="index === 0" @click="addItem">添加</h-link>
                </el-space>
              </div>
            </el-form-item>
          </template>
        </template>
      </el-form>
      <template #footer>
        <HButton is-modal type="primary" @click="submitForm">保存</HButton>
        <HButton is-modal @click="closeClick">取消</HButton>
      </template>
    </h-drawer>
  </div>
</template>

<script setup lang="ts">
  import Pagination from '../../../../src/components/Pagination/index.vue'
  import {
    ArrowDown,
    CircleCheck,
    Delete,
    FolderChecked,
    FolderRemove,
    QuestionFilled,
    RefreshRight,
    Search,
    Warning,
  } from '@element-plus/icons-vue'
  import SingleAddress from '../../../../src/components/address/singleAddress.vue'
  import useStore from './useStore'
  import { ElDivider, TableInstance } from 'element-plus'
  import { h, ref } from 'vue'
  import { Warehouse } from './types'
  import routeComponentName from '@/config/route-component-name'

  defineOptions({
    name: routeComponentName.storage.storageList,
  })

  const onStorageTypeClear = () => {
    storeListSearch.value.outStore = null
    storeListSearch.value.outStoreExample = null
    storeListSearch.value.outStoreType = null
    getListStoreRows()
  }

  // 间距组件的间隔符
  const spacer = h(ElDivider, {
    direction: 'vertical',
    style: 'display: flex; align-items: center;',
  })

  const tableRef = ref<TableInstance | null>(null)
  const handleDelStorage = (warehouse: Warehouse) => {
    if (tableRef.value) {
      tableRef.value.clearSelection()
      tableRef.value.toggleRowSelection(warehouse, true)
      changeAll(3, '要删除仓库')
    }
  }

  let {
    handleChange,
    getListStoreRows,
    closeClick,
    changeAll,
    clearVlaue,
    getDetailStoreItem,
    submitForm,
    addressValChange,
    enableStorePositionValue,
    ruleFormRef,
    addDialog,
    addrs,
    addrsDom,
    rulesStore,
    showAdd,
    storeForm,
    loading,
    total,
    goDetailPage,
    InWidthOutStoreQty,
    addItem,
    deleteItem,
    ids,
    pagination,
    tableDataList,
    storeListSearch,
    outStoreRelation,
    onRelationChange,
    onRelationREmoetMethod,
    saveWarehouseLoading,
  } = useStore()
</script>

<style scoped lang="scss">
  @import './index';
</style>
